<template>
	<div class="login-password" v-loading="loading">
		<el-form ref="form" size="medium" :disabled="saving">
			<el-form-item>
				<el-input
					placeholder="请输入手机号码"
					v-model="form.username"
					maxlength="20"
					@keyup.enter.native="next"
					auto-complete="off"
					prefix-icon="el-icon-user"
					clearable
				></el-input>
			</el-form-item>

			<el-form-item>
				<el-input
					type="password"
					placeholder="请输入密码"
					v-model="form.password"
					maxlength="16"
					clearable
					@keyup.enter.native="next"
					prefix-icon="el-icon-lock"
					show-password
				></el-input>
			</el-form-item>

			<el-form-item class="captcha" v-if="frequency > 2">
				<el-input
					placeholder="请输入图片验证码"
					maxlength="4"
					v-model="form.verifyCode"
					auto-complete="off"
					clearable
					@keyup.enter.native="next"
				></el-input>

				<captcha
					ref="captcha"
					class="captcha-img"
					v-model="form.captchaId"
					@change="captchaChange"
				></captcha>
			</el-form-item>

			<p class="forget-password">
<!--				<el-checkbox v-model="checked" size="medium">记住我</el-checkbox>-->
				<a @click="forget">忘记密码？</a>
			</p>

			<el-button class="submit-btn" @click="next" :saving="saving">登录</el-button>
		</el-form>
	</div>
</template>

<script>
import Captcha from '@/components/common/captcha';
import { mapMutations } from 'vuex';
export default {
	name: 'password',
	components: {
		Captcha
	},
	props: {
		phone: {
			type: String
		}
	},
	data() {
		return {
			form: {
				username: '',
				password: '',
				captchaId: '',
				verifyCode: ''
			},
			checked: false,
			saving: false,
			loading: false,
			frequency: 0
		};
	},
	created() {
		if (this.phone) {
			this.form.username = this.phone;
		}
	},
	methods: {
		...mapMutations(['SET_TOKEN']),
		captchaChange() {
			this.form.verifyCode = '';
		},

		forget() {
			this.$emit('changeOperate', 'forget');
		},

		async next() {
			const { username, password, verifyCode } = this.form;

			if (!username) {
				return this.$message.warning('用户名不能为空');
			}

			if (!password) {
				return this.$message.warning('密码不能为空');
			} else {
				if (password.length < 6) {
					return this.$message.warning('密码不能低于6位');
				} else {
					let reg = /^[a-zA-Z0-9]/;
					if (!reg.test(password)) {
						return this.$message.warning('密码需包含数字或字母且不能以特殊字符开头');
					}
				}
			}

			if (this.frequency > 2 && !verifyCode) {
				return this.$message.warning('图片验证码不能为空');
			}

			this.saving = true;
			this.loading = true;

			try {
				this.$service.common
					.userLogin(this.form)
					.then(async res => {
						if (res.needInvide) {
							// 区分手机号、用户名
							let reg = /^1(((5[0-35-9][0-9])|([34879][0-9]{2}))[0-9]{7})$/;
							// 注册成功后弹窗填写邀请码
							if (reg.test(this.form.username)) {
								this.$refs.invitation.open({
									phone: this.form.username
								});
							} else {
								this.$refs.invitation.open({
									username: this.form.username
								});
							}
						} else {
							if (this.frequency >= 2) {
								this.$store.dispatch('setToken', res);
							} else {
								await this.$store.dispatch('userLogin', this.form);
							}
							this.saving = false;
							this.$parent.next();
						}
					})
					.catch(err => {
						if (err === '验证码不正确~') this.frequency = 3;
						if (this.frequency > 2) {
							this.$refs.captcha.refresh();
						}
						this.frequency++;
						this.$message.error(err);
					});
				this.saving = false;
				this.loading = false;
			} catch (err) {
				console.log('执行异常', err);
				this.saving = false;

				this.$message.error(err);

				this.loading = false;

				if (this.frequency > 2) {
					this.$refs.captcha.refresh();
				}
				this.frequency++;
			}
		},

		async invitationNext() {
			// 登录
			await this.$store.dispatch('userLogin', this.form);

			this.saving = false;

			this.$parent.next();
		}
	}
};
</script>

<style lang="stylus" scoped>
.login-password {
    >>>.el-form {
        width: 100%;
        margin 0 auto
        border-radius: 3px;
        z-index: 1;

        .el-form-item {
            margin-bottom: 5px;
        }

        .el-input {
			margin-bottom: 20px;
            .el-input__inner {
				background: #fff;
				border: 1px solid #E5E5E5;
				border-radius: 50px;
				font-size: 18px;
				padding: 28px 50px;
				width: 100%;

				&::-webkit-input-placeholder {
					color: #999;
				}

				&::-moz-placeholder {
					color: #999;
				}

				&::-moz-placeholder {
					color: #999;
				}

				&::-ms-input-placeholder {
					color: #999;
				}

				&:active, &:focus {
					border-color: #999;
				}
			}
			.el-input__icon {
				font-size: 22px;
				margin-left: 10px;
				margin-top: 4px;
			}
        }

        .captcha {
            position: relative;

            .captcha-img {
				min-width: 50px;
                position: absolute;
                top: -4px;
                right: 0;
            }
        }

		.forget-password {
			text-align: right;
			color: #999999;
			flexBox(flex-end, center);
			/deep/.el-checkbox {
				.el-checkbox__label {
					font-size: 20px;
				}
			}
			a {
				cursor: pointer;
				font-size: 20px;
				transition: 0.5s;
				&:hover {
					color: $main-color;
				}
			}
		}
        .submit-btn {
            width: 100%;
            font-size: 24px;
			border: none;
            background: linear-gradient(to top left, $main-color, $linear-color);
            color: $color-white;
            letter-spacing: 2px;
            cursor: pointer;
            margin-top: 20px;
			border-radius: 50px;
			padding: 20px 0;
            transition: .3s;
            &:hover {
                opacity: 0.8;
            }
        }
    }
}
</style>
